<template>
  <div id="drag-container" ref="dragContainer">
    <div class="flex-container">
      <div
        v-for="(colItems, colIndex) in items"
        :key="colIndex"
        class="flex-col"
      >
        <div
          v-for="element in colItems"
          :key="element.id"
          class="ellipsis"
          :style="{ width: '100px' }"
        >
          {{ element.name }}
        </div>
      </div>
    </div>
    <div class="flex-container">
      <div
        v-for="(colItems, colIndex) in items"
        :key="colIndex"
        class="flex-col"
        :style="{ 'flex-basis': flexBasic[colIndex] }"
      >
        <Container
          group-name="container"
          @drag-start="onDragStart"
          @drop="(dropResult) => onDrop(colIndex, dropResult)"
          @drag-leave="() => onDragLeave(colIndex)"
          @drag-enter="() => onDragEnter(colIndex)"
          @drop-ready="onDropReady"
          :get-child-payload="(itemIndex) => getChildPayload(colIndex, itemIndex)"
          :get-ghost-parent="getGhostParent"
        >
          <Draggable
            v-for="element in colItems"
            :key="element.id"
            class="flex-item"
          >
            {{ element.name }}
          </Draggable>
        </Container>
      </div>
    </div>
  </div>
</template>

<script>
import { Container, Draggable } from "vue-smooth-dnd";
import { generateRandomItem } from "../assets/utils";

export default {
  name: "dragable",
  components: { Container, Draggable },
  data() {
    const items = Array.from(
      { length: 3 },
      (_, i) => generateRandomItem(i, 3)
    );

    return {
      isDragging: false,
      dragColIndex: null,
      dragItemIndex: null,
      dragItem: null,
      items,
      flexBasic: items.map(() => `${(1 / items.length) * 100}%`),
    };
  },
  mounted() {
    // document.addEventListener("mousemove", (e) => {
    //   if (isDragging) {
    //     const dx = e.clientX - startX;
    //     const dy = e.clientY - startY;
    //     // 如果移动超过阈值，判定为拖拽中
    //     if (Math.abs(dx) > 5 || Math.abs(dy) > 5) {
    //       console.log("拖拽中...", { dx, dy });
    //     }
    //   }
    // });
  },
  methods: {
    onDragStart(dragResult) {
      if (dragResult.isSource) {
        this.dragColIndex = dragResult.payload.colIndex;
        this.dragItemIndex = dragResult.payload.itemIndex;
        this.dragItem =
          this.items[dragResult.payload.colIndex][dragResult.payload.itemIndex];
      }
    },
    onDragLeave(colIndex) {
      if (colIndex !== 0 && colIndex !== this.items.length - 1) {
        return;
      }

      if (colIndex !== this.dragColIndex || this.items[colIndex].length !== 1) {
        return;
      }
    },
    onDragEnter(colIndex) {
      console.log(colIndex);
    },
    onDropReady(dropResult) {
      console.log(dropResult);
    },
    onDrop(colIndex, dropResult) {
      const { removedIndex, addedIndex } = dropResult;

      if (removedIndex !== null) {
        this.items[colIndex].splice(removedIndex, 1);
        if (this.items[colIndex].length === 0) {
          this.items.splice(colIndex, 1);
          this.flexBasic = this.items.map(
            () => `${(1 / this.items.length) * 100}%`
          );
        }
      }

      if (this.dragItem && addedIndex !== null) {
        this.items[colIndex].splice(addedIndex, 0, this.dragItem);
      }
    },
    getChildPayload(colIndex, itemIndex) {
      return { colIndex, itemIndex };
    },
    getGhostParent() {
      console.log(123);
      return document.body;
    }
  },
};
</script>

<style>
.flex-container {
  display: flex;
  overflow-y: auto;
}

.flex-col {
  flex-grow: 1;
}

.flex-item {
  background-color: antiquewhite;
  margin: 20px;
  padding: 20px;
  word-break: break-all;
}

.ellipsis {
  white-space: nowrap;
  /* 不换行 */
  overflow: hidden;
  /* 超出隐藏 */
  text-overflow: ellipsis;
  /* 超出用 ... 代替 */
}
</style>
